<template>
  <!-- 团队角色管理 -->
  <div class="page_vue" v-loading="pageLoading">
    <!-- 标题 -->
    <navigation-title>
      <div class="create_box">
        <el-button type="primary" @click="openCreateClick('add')">
          <el-icon>
            <Plus />
          </el-icon>
          <span class="create_text">{{ $t("teamDoc.role.addRole") }}</span>
        </el-button>
      </div>
    </navigation-title>
    <!-- 搜索 -->
    <search-input :placeholder="$t('teamDoc.people.searchRole')" @inputEnter="searchInputEnter"
      class="search_box"></search-input>
    <!-- 表格 -->
    <div class="table_box">
      <el-table :data="TableData" border class="tableClass" ref="multipleTable" tooltip-effect="dark"
        style="width: 100%" :highlight-current-row="true">
        <el-table-column :label="$t('teamDoc.role.roleName')" width="160px">
          <template #default="scope">
            <svg-icon icon-class="user"
              :style="{ color: scope.row.iconColor ? scope.row.iconColor : '#000000' }"></svg-icon>
            <span>{{ scope.row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('teamDoc.role.roleLevel')" prop="rank" width="80px"></el-table-column>
        <el-table-column :label="$t('teamDoc.role.roleDescription')" prop="remark"></el-table-column>
        <el-table-column prop="createTime" :label="$t('teamDoc.people.joinDate')" width="180px"></el-table-column>
        <el-table-column :label="$t('commen.operation')" width="120px" align="center">
          <template #default="scope">
            <div v-if="scope.row.rank != 1" style="display: flex;">
              <el-button size="small" type="primary" :icon="Edit" @click="openCreateClick('edit', scope.row)">
                <!-- <el-icon>
                  <Edit />
                </el-icon> -->
              </el-button>
              <el-button size="small" type="danger" :icon="Delete" @click="deleteRoleUserClick(scope.row)">
                <!-- <el-icon>
                  <Delete />
                </el-icon> -->
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 5px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="requestStr.page" :page-sizes="[10, 20, 30, 40]" :page-size="requestStr.size"
          layout="total,  prev, pager, next,sizes" :total="requestStr.total">
        </el-pagination>
      </div>
    </div>
    <!-- 新增角色对话框 -->
    <el-dialog :title="addOrEdit == 'add' ? $t('commen.add') : $t('commen.edit')" v-model="create_visibleDialog"
      width="600px" :append-to-body="true" :close-on-click-modal="false" @close="create_closeClick">
      <div v-loading="diologLoading">
        <el-form :model="create_form" :rules="create_rules" ref="ruleFormRef" label-width="140px" class="demo-ruleForm">
          <el-form-item :label="$t('teamDoc.role.meunIcon')" prop="iconColor">
            <svg-icon icon-class="user" :style="{ color: create_form.iconColor }" style="height: 32px;width: 16px;" />
            <el-color-picker v-model="create_form.iconColor"></el-color-picker>

          </el-form-item>
          <el-form-item :label="$t('teamDoc.role.roleName')" prop="name">
            <el-input v-model="create_form.name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('teamDoc.role.roleLevel')" prop="hierarchy">
            <el-input-number v-model="create_form.hierarchy" :min="2" :max="10" :step="1" step-strictly
              ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('teamDoc.role.roleDescription')" prop="describe">
            <el-input type="textarea" v-model="create_form.describe"></el-input>
          </el-form-item>
          <el-form-item :label="$t('teamDoc.role.roleList')" prop="roleList">
            <el-checkbox-group v-model="create_form.roleList" class="roleList_box">
              <el-checkbox v-for="item in roleList_data" :key="item.value" :label="item.value" :value="item.value"
                :disabled="item.value == 'check'">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer create_box">
        <el-button @click="create_closeClick">{{ $t('commen.cancel') }}</el-button>
        <el-button type="primary" @click="create_confirmClick(ruleFormRef)">{{ $t('commen.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script lang="ts" setup>
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import navigationTitle from '../components/newUiModule/navigation-title.vue'
import searchInput from '@/views/components/newUiModule/search-input.vue'
import roleList_team from '@/utils/roleList'
import teamRoleApi from '@/api/teamKnowdge/teamRoleApi'
import { Delete, Edit } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance() as any
const pageLoading = ref(false)
const roleList_data = reactive(roleList_team.roleList_team)
const TableData = ref([])
const teamId = ref('')
const ruleFormRef = ref<FormInstance>()
const requestStr = reactive({
  page: 1,
  size: 10,
  total: 0,
})
const create_visibleDialog = ref(false)
const create_form = reactive({
  iconColor: "#000000",
  name: "",
  hierarchy: 6,
  describe: "",
  roleList: ["check"],
  id: "",
})
const create_rules = reactive({
  iconColor: [{ required: true, message: proxy.$t("teamDoc.rules.msg2"), trigger: "blur" }],
  name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
  hierarchy: [{ required: true, message: proxy.$t("teamDoc.rules.msg3"), trigger: "blur" }],
  describe: [{ required: true, message: proxy.$t("teamDoc.rules.msg4"), trigger: "blur" }],
  roleList: [{ required: true, message: proxy.$t("teamDoc.rules.msg5"), trigger: "change" }]
})
const diologLoading = ref(false)
const addOrEdit = ref('')
const inputString = ref('')

onMounted(() => {
  teamId.value = proxy.$route.query.teamId
  getTableData()
})

const getTableData = () => {
  pageLoading.value = true
  teamRoleApi.apiTeamRoleQuery({
    teamId: teamId.value,
    roleName: inputString.value,
    page: requestStr.page - 1,
    size: requestStr.size
  })
    .then(res => {
      // res.data.rows.forEach((element: any) => {
      //   element.params = JSON.parse(element.params)
      // })
      TableData.value = res.data.rows
      requestStr.total = res.data.total
      pageLoading.value = false
    }).catch((err) => {
      pageLoading.value = false
    })
}
const searchInputEnter = (val: any) => {
  inputString.value = val
  requestStr.page = 1
  getTableData()
}

const openCreateClick = (type, row?) => {
  console.log(row, '123')
  addOrEdit.value = type
  create_visibleDialog.value = true
  if (addOrEdit.value == 'edit') {
    create_form.iconColor = row.iconColor
    create_form.name = row.roleName
    create_form.hierarchy = row.rank
    create_form.describe = row.remark
    create_form.roleList = JSON.parse(row.params)
    create_form.id = row.id
  }
}
const create_closeClick = () => {
  create_visibleDialog.value = false
  create_form.iconColor = "#000000"
  create_form.name = ""
  create_form.hierarchy = 5
  create_form.describe = ""
  create_form.roleList = ["check"]
  create_form.id = ""
}
const create_confirmClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {

    if (valid) {
      let params = {
        iconColor: create_form.iconColor,
        roleName: create_form.name,
        rank: create_form.hierarchy,
        remark: create_form.describe,
        permCodes: create_form.roleList,
        teamId: teamId.value,
        id: create_form.id
      }
      if (addOrEdit.value == 'add') {
        apiTeamRoleAdd(params)
      }
      if (addOrEdit.value == 'edit') {
        params.id = create_form.id
        apiTeamRoleUpdateUserRoleType(params)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
const apiTeamRoleAdd = async (params) => {
  const res = await teamRoleApi.apiTeamRoleAdd(params)
  if (res.code == 200) {
    create_visibleDialog.value = false
    ElMessage.success('添加成功')
    getTableData()
    diologLoading.value = false
  }
}
const apiTeamRoleUpdateUserRoleType = async (params) => {
  const res = await teamRoleApi.apiTeamRoleUpdateUserRoleType(params)
  if (res.code == 200) {
    create_visibleDialog.value = false
    ElMessage.success('修改成功')
    getTableData()
    diologLoading.value = false
  }
}
const deleteRoleUserClick = async (row) => {
  ElMessageBox.confirm(proxy.$t("teamDoc.role.delMes"), proxy.$t("commen.title"), {
    confirmButtonText: proxy.$t("commen.confirm"),
    cancelButtonText: proxy.$t("commen.cancel"),
    type: "warning",
  })
    .then(() => {
      teamRoleApi.apiTeamRoleDelete(row.id).then(res => {
        if (res.code == 200) {
          ElMessage.success('删除成功')
          getTableData()
        }
      })
    })
}
const handleCurrentChange = (val) => {
  requestStr.page = val
  getTableData()
}
const handleSizeChange = (val) => {
  requestStr.size = val
  getTableData()
}


</script>

<style scoped lang="scss">
:deep(.search_box) {
  .search_content_box {
    border-bottom: none !important;
  }

  .el-input__wrapper {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;
  }
}

.page_vue {
  height: calc(100vh - 50px);
}

.create_box {
  :deep(.el-button--text) {
    padding: 9px 15px;
    color: #aaa;
  }

  :deep(.el-button--text:hover) {
    color: #6698ff;
  }

  :deep(.el-button--primary) {
    background-color: #6698ff;
    border-color: #6698ff;
  }

  :deep(.el-button--primary:focus) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }

  :deep(.el-button--primary:hover) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }
}

.table_box {
  margin: 0px 20px;

  .tableClass {
    border-color: rgba(0, 0, 0, 0);
  }
}

.roleList_box {
  :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color: #6698ff;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #6698ff;
    border-color: #6698ff;
  }
}
</style>